// 加载资源
// 加载文字图片
lockFont()
var useCard1 = document.getElementsByClassName("fontYinCard");
var useCard2 = document.getElementsByClassName("zhuoFontYinCard");
lockMusic()

function lockFont() {
    // 五十音字体加载
    var DocFont = document.getElementsByClassName("font")[0]
    for (const key in font1) {
        // 最外层元素
        var cord = document.createElement("div")
        cord.className = "fontYinCard"

        var yinCord = document.createElement("div")
        yinCord.innerText = yin1[key]
        yinCord.className = "yin-card"
        cord.appendChild(yinCord)

        var fontCord = document.createElement("div")
        fontCord.innerText = font1[key]
        fontCord.className = "font-card";
        cord.appendChild(fontCord);
        DocFont.appendChild(cord)
    }
    // 浊音字体加载
    var DocZhuoFont = document.getElementsByClassName("font")[2]
    for (const key in font2) {
        // 最外层元素
        var cord = document.createElement("div")
        cord.className = "zhuoFontYinCard"

        var yinCord = document.createElement("div")
        yinCord.innerText = yin2[key]
        yinCord.className = "zhuo-yin-card"
        cord.appendChild(yinCord)

        var fontCord = document.createElement("div")
        fontCord.innerText = font2[key]
        fontCord.className = "zhuo-font-card";
        cord.appendChild(fontCord);
        DocZhuoFont.appendChild(cord)
    }
}
//声音加载
function lockMusic() {
    // 五十音加载
    var DocMusic1 = document.getElementsByClassName("music")[0]
    for (const key in DateMusic1) {
        var audio = document.createElement("audio");
        audio.src = DateMusic1[key]
        audio.className = "music1"
        DocMusic1.appendChild(audio)
    }
    // 浊音加载
    var DocMusic2 = document.getElementsByClassName("music")[1]
    for (const key in DateMusic2) {
        var audio = document.createElement("audio");
        audio.src = DateMusic2[key]
        audio.className = "music2"
        DocMusic2.appendChild(audio)
    }

}



// 获取页面
var logo = document.getElementById("logo");
var init = document.getElementById("init-card");
var lookFontCard = document.getElementById("look-font-card");
var listenFontCard = document.getElementById("listen-font-card");
var lookZhuoFontCard = document.getElementById("look-zhuo-font-card");
var listenZhuoFontCard = document.getElementById("listen-zhuo-font-card");
var lookChangFontCard = document.getElementById("look-chang-font-card");



// 获取主页面的按钮
// 五十音 看字到音
var title0 = document.getElementsByClassName("title")[0]
title0.addEventListener("click", function() {
    logo.style.display = "none"
    init.style.display = "none"
    lookFontCard.style.display = "block"
    choice1()

})
// 五十音 听音写字
var title1 = document.getElementsByClassName("title")[1]
title1.addEventListener("click", function() {
    logo.style.display = "none"
    init.style.display = "none"
    listenFontCard.style.display = "block"
    choice2()


})
// 浊音 看字到音
var title2 = document.getElementsByClassName("title")[2]
title2.addEventListener("click", function() {
    logo.style.display = "none"
    init.style.display = "none"
    lookZhuoFontCard.style.display = "block"
    choice3()
})

// 浊音 听音写字
var title3 = document.getElementsByClassName("title")[3]
title3.addEventListener("click", function() {
    logo.style.display = "none"
    init.style.display = "none"
    listenZhuoFontCard.style.display = "block"
    choice4()
})

// 长音规则
var title4 = document.getElementsByClassName("title")[4]
title4.addEventListener("click", function() {
    logo.style.display = "none"
    init.style.display = "none"
    lookChangFontCard.style.display = "block"
})